<template>
    <div class="demo">
        <form action="" method="post">
            <div>
                <input id="a" v-model="user.username" v-vali="validate.username" /><span></span>
            </div>
            <div>
                <input id="b" v-model="user.key" v-vali="validate.vcode" /><span></span>
            </div>
            <div>
                <input id="c" v-model="user.test" v-vali="validate.range" /><span></span>
            </div>
            <div>
                <input id="d" v-model="user.password" v-vali="validate.reg" /><span></span>
            </div>
            <div>
                <button type="button" @click="login" >提交</button>
            </div>
        </form>
    </div>
</template>
<script>
//管理员模块首页
import Vue from 'vue';
import validate from "./validate";
Vue.use(validate)
export default {
  name: 'admin',
  components: {},
  computed:{},
  data () {
    return {
      user:{
        username:'@@',
        password:'！！',
        key:'',
        vcode:'',
        test:''
      },

      validate:{
        username:[{type:'reg',name:'english',empty:true}],
        vcode:[{type:'required',msg:'验证码不能为空'},],
        range:[{type:'range',range:[0,100]}],
        reg:[{type:'reg',reg:/^[1][3|5|8][0-9]{9}$/,msg:'手机号吗验证不通过',empty:true}]
      }
    }
  },
  methods:{
    login(){
      if( this.$vali.checkAll() ){
        //表单提交啦
        console.log('表单提交啦');
        alert('提交了');
      }
    }
  },
  mounted(){

  }
}
</script>
<style>
#app{margin-top:0;}
.demo{text-align:left;}
input{padding:10px;}
</style>